<template>
  <div class="merchandise">
    <!-- 顶部通知栏 -->

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="container">
        <router-link to="/" class="link">首页</router-link>
        <span class="sep">/</span>
        <span>咖啡周边</span>
      </div>
    </div>

    <main class="main">
      <div class="container">
        <h1 class="page-title">精选咖啡周边</h1>


        <!-- 分类卡片 -->
        <div class="category-grid">
          <div
            v-for="c in categories.slice(0, 4)"
            :key="c.id"
            class="category-card"
            :data-category="c.id"
            @click="selectCategory(c.id)"
          >
            <div class="img">
              <!-- 处理图片路径和空值情况 -->
              <img
                :src="c.image_url
                  ? (c.image_url.startsWith('http') ? c.image_url : `http://127.0.0.1:8000/static/${c.image_url}`)
                  : ''"
                :alt="c.name"
                style="width: 100%; height: 100%; object-fit: cover;"
              />
            </div>
            <div class="card-overlay"></div>
            <div class="card-content">
              <h3>{{ c.name }}</h3>
            </div>
          </div>
        </div>

        <!-- 两栏布局 -->
        <div class="main-content">
          <!-- 左侧筛选 -->
          <aside class="filter-panel">
            <!-- 分类筛选 -->
            <div class="filter-section">
              <h3>分类筛选</h3>
              <button
                class="filter-btn"
                :class="{ active: currentCat === 'all' }"
                @click="changefun('all')"
              >
                全部商品
                <span class="badge">{{ totalProductCount }}</span>
              </button>
              <button
                v-for="c in categories"
                :key="c.id"
                :class="['filter-btn', { active: currentCat === c.id }]"
                @click="changefun(c.id)"
              >
                {{ c.name }}
                <span class="badge">{{ c.productCount || 0 }}</span>
              </button>
            </div>
          </aside>

          <!-- 右侧商品区 -->
          <section class="product-area">
            <!-- 分类介绍 & 排序 -->
            <div class="intro-bar">
              <h2>{{ currentTitle }}</h2>
              <p class="desc">{{ currentDesc }}</p>

              <div class="sort-bar">
                <span>排序方式：</span>
                <button
                  v-for="s in sortOptions"
                  :key="s.value"
                  :class="['sort-btn', { active: currentSort === s.value }]"
                  @click="currentSort = s.value"
                >
                  {{ s.label }}
                </button>
                <span class="spacer"></span>
                <button class="view-btn active"><i class="fa fa-th-large"></i></button>
                <button class="view-btn"><i class="fa fa-list"></i></button>
              </div>
            </div>

            <!-- 商品网格 -->
            <div class="product-grid">
              <!-- 加载中提示 -->
              <div v-if="loading" class="empty-tip">
                加载中...
              </div>
              <!-- 无数据时显示提示 -->
              <div v-else-if="!Products.length" class="empty-tip">
                暂无该分类下的商品
              </div>

              <!-- 有数据时渲染商品 -->
              <div
                v-else
                v-for="p in displayedProducts"
                :key="p.id"
                class="product-card"
              >
                <div class="img-box">
                  <img
                    :src="p.image_urls && p.image_urls.length
                      ? `http://127.0.0.1:8000/static/${p.image_urls[0]}`
                      : 'https://bpic.588ku.com/element_pic/20/11/08/ca63cf90bf7e1acf8d913355cf1e3b39.jpg'"
                    :alt="p.name"
                    class="product-img"
                  >
                  <span v-if="p.is_featured" class="badge featured">精选</span>
                  <div class="hover-box">
                    <router-link :to="'/merchandiseproductdetail/' + p.id">
                      <button class="icon-btn"><i class="fa fa-eye"></i></button>
                    </router-link>
                    <button class="icon-btn" @click="addToCart(p)"><i class="fa fa-shopping-cart"></i></button>
                    <button class="icon-btn" @click="addTofavorite(p)"><i class="fa fa-heart-o"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <div class="meta">{{ p.category || '周边' }} · {{ p.brand || '官方' }}</div>
                  <router-link :to="'/merchandiseproductdetail/' + p.id">
                    <div class="name">{{ p.name }}</div>
                  </router-link>
                  <div class="rating">
                    <i v-for="i in 5" :key="i" :class="starCls(i, p.stars || 5)"></i>
                    <span>({{ p.review_count || 0 }})</span>
                  </div>
                  <div class="price-row">
                    <span class="price">¥{{ p.price }}</span>
                    <span v-if="p.original_price" class="original">¥{{ p.original_price }}</span>
                    <span v-if="p.promo" class="promo">{{ p.promo }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="pagination" v-if="totalPages > 0 && !loading">
              <button
                class="pagination-btn"
                @click="prevPage"
                :disabled="currentPage === 1 || loading"
              >
                上一页
              </button>
              <button
                v-for="page in totalPages"
                :key="page"
                class="pagination-page"
                :class="{ 'active': currentPage === page }"
                @click="goToPage(page)"
                :disabled="loading"
              >
                {{ page }}
              </button>
              <button
                class="pagination-btn"
                @click="nextPage"
                :disabled="currentPage === totalPages || loading"
              >
                下一页
              </button>
            </div>

          </section>
        </div>
      </div>
    </main>

    <Footer />
    <BackTop :visible="showTop" @click="toTop" />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import BackTop from '@/components/BackTop.vue'
import api from '@/api/request'


export default {
  name: 'merchandise',
  components: { Header, Footer, BackTop },
  data () {
    return {
      showTop: false,
      currentCat: 'all', // 默认显示全部商品
      currentSort: 'recommend',
      priceRange: 500,
      minPrice: null,
      maxPrice: null,
      categories: [], // 分类列表（带产品数量）
      Products: [], // 当前显示的商品
      brands: [
        { label: 'HARIO', checked: false },
        { label: 'Chemex', checked: false },
        { label: 'Bialetti', checked: false },
        { label: 'Breville', checked: false },
        { label: 'Costa', checked: false }
      ],
      promos: [
        { label: '特价商品', checked: false },
        { label: '套装优惠', checked: false },
        { label: '新品上市', checked: false }
      ],
      sortOptions: [
        { label: '推荐', value: 'recommend' },
        { label: '价格从低到高', value: 'asc' },
        { label: '价格从高到低', value: 'desc' },
        { label: '最新上架', value: 'newest' },
        { label: '销量优先', value: 'sales' }
      ],
      currentPage: 1,
      pageSize: 6, // 与后端保持一致
      totalPages: 0,
      totalProductCount: 0,
      loading: false, // 加载状态
      isSubmitting: false // 收藏按钮提交状态（补充定义）
    }
  },
  created() {
    // 先加载分类（带产品数量），再加载默认商品
    this.loadMerchandiseCategories().then(() => {
      this.changefun('all');
    });
  },
  computed: {
    displayedProducts () {
      if (!this.Products.length || this.loading) return [];
      let sortedProducts = [...this.Products];

      // 匹配后端周边商品字段：is_featured=推荐，created_at=时间，sales_count=销量
      switch (this.currentSort) {
        case 'asc': // 价格从低到高
          sortedProducts.sort((a, b) => Number(a.price) - Number(b.price));
          break;
        case 'desc': // 价格从高到低
          sortedProducts.sort((a, b) => Number(b.price) - Number(a.price));
          break;
        case 'newest': // 最新上架（按创建时间倒序）
          sortedProducts.sort((a, b) => {
            const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
            const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
            return timeB - timeA;
          });
          break;
        case 'sales': // 销量优先（按销量倒序）
          sortedProducts.sort((a, b) => {
            const salesA = a.sales_count || 0;
            const salesB = b.sales_count || 0;
            return salesB - salesA;
          });
          break;
        case 'recommend': // 推荐排序（先精选，再最新）
          sortedProducts.sort((a, b) => {
            if (a.is_featured && !b.is_featured) return -1;
            if (!a.is_featured && b.is_featured) return 1;
            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
          });
          break;
        default:
          break;
      }

      return sortedProducts;
    },
    currentTitle () {
      if (this.currentCat === 'all') {
        return '全部咖啡周边';
      }
      const category = this.categories.find(c => c.id === this.currentCat);
      return category ? category.name : '全部咖啡周边';
    },
    currentDesc () {
      // 优先使用后端分类的description，无则用默认文案
      if (this.currentCat !== 'all') {
        const category = this.categories.find(c => c.id === this.currentCat);
        if (category?.description) return category.description;
      }
      // 默认文案映射
      const descMap = {
        all: '精选高品质咖啡器具和周边产品，提升您的咖啡冲煮体验',
        'pour-over': '专业手冲咖啡器具，包括手冲壶、滤杯、滤纸等，为您带来完美的手冲体验',
        grinders: '精密磨豆机系列，从手动到电动，满足不同需求，均匀研磨释放最佳风味',
        machines: '各类咖啡机，从半自动到全自动，轻松制作意式浓缩、美式等多种咖啡',
        cups: '精致咖啡杯具，包括马克杯、玻璃杯、浓缩杯等，为您的咖啡增添仪式感',
        cleaning: '专业咖啡器具清洁工具，保持器具洁净，延长使用寿命',
        storage: '密封储存容器，保持咖啡豆新鲜，锁住最佳风味',
        other: '各类咖啡相关配件，满足您的各种冲煮需求'
      };
      return descMap[this.currentCat] || descMap.all;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    // 点击分类卡片切换分类
    selectCategory (id) {
      this.changefun(id);
      // 平滑滚动到列表区域
      const target = document.querySelector('.product-area');
      if (target) target.scrollIntoView({ behavior: 'smooth' });
    },
    // 加入购物车（优化提示，移除刷新）
    async addToCart(product) {
      if (this.$store.getters['user/isVisitor']) {
        this.$store.commit('user/SET_REDIRECT_PATH', this.$route.path);
        return this.$confirm(
          '您还暂未登录，无法购买商品，是否前往登录？',
          '提示',
          { confirmButtonText: '是', cancelButtonText: '否', type: 'warning' }
        ).then(() => {
          this.$router.push('/login');
        }).catch(() => {
          this.$message.info('已取消登录');
        });
      }

      try {
        await api.post('/cart', {
          product_id: product.id,
          product_type: 'merchandise',
          quantity: 1
        });
        this.$message.success("已成功添加至购物车");
        window.location.reload();
      } catch (e) {
        console.error('添加购物车失败：', e.response?.data);
        this.$message.error(e?.response?.data?.detail || '添加购物车失败，请稍后再试');
      }
    },
    // 加入收藏（原逻辑不变）
    async addTofavorite(product) {
      this.isSubmitting = true;
      try {
        await api.post('/favorite/add', {
          product_id: product.id,
          product_type: 'merchandise',
        });
        this.$message.success("已成功添加至收藏");
      } catch (e) {
        console.error('添加收藏失败:', e);
        let errorMsg = "添加收藏失败，请稍后再试";
        if (e.response?.status === 400 || e.response?.status === 500) {
          try {
            const data = typeof e.response.data === "string"
              ? JSON.parse(e.response.data)
              : e.response.data;
            errorMsg = data.detail || data.error || errorMsg;
          } catch (parseError) {
            errorMsg = e.response.data || errorMsg;
          }
        }
        this.$message.warning(errorMsg);
      } finally {
        this.isSubmitting = false;
      }
    },
    // 核心修复：加载周边商品（调用search接口，支持分类筛选，适配$axios.data层级）
    loadMerchandise(categoryId = 'all') {
      this.loading = true;
      // 后端search接口参数：category_id=0不筛选，is_active='true'只显示上架商品
      const params = {
        page: this.currentPage,
        limit: this.pageSize,
        category_id: categoryId === 'all' ? 0 : categoryId,
        is_active: 'true' // 周边商品上架状态字段（区别于咖啡的is_puton）
      };

      return this.$axios.get('http://127.0.0.1:8000/merchandiseProduct/search', { params })
        .then(res => {
          console.log(`周边分类${categoryId}商品数据：`, res);
          // 适配$axios.data层级：后端返回 {code:200, data:{merchandise_products:[...], pagination:{...}}}
          const { merchandise_products, pagination } = res.data || {};

          // 直接使用后端返回的商品数据（无需额外映射，保留原始字段）
          this.Products = merchandise_products || [];
          // 更新分页信息（从后端pagination字段获取）
          this.totalProductCount = pagination?.total || 0;
          this.totalPages = pagination?.total_pages || 0;
          return this.Products;
        })
        .catch(err => {
          console.error(`加载周边分类${categoryId}商品失败：`, err);
          this.Products = [];
          this.totalProductCount = 0;
          this.totalPages = 0;
          this.$message.error('周边商品加载失败，请稍后再试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 上一页（关联当前分类）
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.loadMerchandise(this.currentCat);
      }
    },
    // 下一页（关联当前分类）
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.loadMerchandise(this.currentCat);
      }
    },
    // 跳转到指定页（关联当前分类）
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.currentPage = page;
        this.loadMerchandise(this.currentCat);
      }
    },
    // 滚动监听
    handleScroll() {
      this.showTop = window.scrollY > 300;
    },
    // 核心修复：切换分类（重置页码+调用search接口）
    changefun(categoryId) {
      this.currentCat = categoryId;
      this.currentPage = 1; // 切换分类重置为第1页
      this.loadMerchandise(categoryId); // 加载当前分类商品
    },
    // 核心修复：加载周边分类（带产品数量统计，适配$axios.data层级）
    async loadMerchandiseCategories() {
      try {
        // 1. 加载分类列表（适配$axios.data层级）
        const catRes = await this.$axios.get("http://127.0.0.1:8000/merchandiseCategory/");
        const categories = Array.isArray(catRes.data) ? catRes.data : catRes;

        // 2. 为每个分类统计商品数量（调用by_category接口）
        const categoriesWithCount = await Promise.all(
          categories.map(async (cat) => {
            const prodRes = await this.$axios.get(`http://127.0.0.1:8000/merchandiseProduct/by_category/${cat.id}`);
            // 适配$axios.data层级：后端返回 {code:200, data:[...]}
            return {
              ...cat,
              productCount: prodRes.data?.length || 0, // 分类下商品数量
              description: cat.description || '' // 保留分类描述
            };
          })
        );

        this.categories = categoriesWithCount;
        // 3. 统计全部商品数量
        this.totalProductCount = categoriesWithCount.reduce((total, cat) => total + cat.productCount, 0);
        return categoriesWithCount;
      } catch (error) {
        console.error("周边分类加载失败：", error);
        this.categories = [];
        this.totalProductCount = 0;
      }
    },
    // 返回顶部
    toTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    // 星级评分样式
    starCls(i, score) {
      const realScore = Number(score) || 0;
      return i <= realScore
        ? 'fa fa-star'
        : (i - 0.5 <= realScore ? 'fa fa-star-half-o' : 'fa fa-star-o');
    }
  }
}
</script>

<style scoped>
/* 全局变量 */
:root {
  --primary: #8B5A2B;
  --secondary: #D2B48C;
  --accent: #CD853F;
  --light: #F5F5DC;
  --dark: #3E2723;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  margin-top: -20px;
}

.page-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 35px;
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
}

.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #8b5a2b;
}

.breadcrumb {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  color: #6b7280;
  padding: 12px 0;
}

.breadcrumb .link {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb .sep {
  margin: 0 8px;
}

.main {
  flex: 1;
  padding: 32px 0;
  background-color: #faf8f5;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.category-card {
  position: relative;
  height: 380px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.category-card .img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category-card:hover img {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
}

.card-content h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.main-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .main-content {
    grid-template-columns: 280px 1fr;
  }
}

.filter-panel {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  position: sticky;
  top: 96px;
  align-self: start;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-section h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
}

.filter-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: #f8f8f8;
  border: none;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.filter-btn:hover {
  background: #f0f0f0;
}

.filter-btn.active {
  background: var(--primary);
  color: #fff;
}

.filter-btn .badge {
  background: #e5e7eb;
  color: #111;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

.filter-btn.active .badge {
  background: #fff;
  color: var(--primary);
}

.intro-bar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

.intro-bar h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.intro-bar .desc {
  color: #555;
  margin-bottom: 16px;
}

.sort-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #f3f4f6;
  padding-top: 16px;
}

.sort-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  background: #f8f8f8;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.sort-btn:hover {
  background: #f0f0f0;
}

.sort-btn.active {
  background: var(--primary);
  color: #fff;
}

.spacer {
  flex: 1;
}

.view-btn {
  padding: 6px;
  border-radius: 6px;
  font-size: 16px;
  color: #6b7280;
  background: #f8f8f8;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn:hover, .view-btn.active {
  background: var(--primary);
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.img-box {
  position: relative;
}

.product-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
}

.badge.featured {
  background: var(--primary);
}

.hover-box {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.product-card:hover .hover-box {
  opacity: 1;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  border: none;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--primary);
  color: #fff;
}

.card-body {
  padding: 16px;
}

.meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.name {
  color: #000; /* 纯黑色文字 */
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 现代无衬线字体栈 */
  font-weight: 600; /* 中等加粗，突出标题 */
  font-size: 15px; /* 适中字号，平衡可读性与布局 */
  letter-spacing: 0.3px; /* 轻微字间距，让文字更舒展 */
  line-height: 1.4; /* 行高优化，换行时更美观 */
  margin-bottom: 6px;
  transition: all 0.25s ease; /* 平滑过渡效果 */
  text-decoration: none;
  text-shadow: 0 0 1px rgba(0,0,0,0.05); /* 极淡阴影增强立体感 */
}

.name:hover {
  color: #8B5A2B; /* hover时切换为主题色 */
  letter-spacing: 0.5px; /* 轻微放大字间距，增强交互感 */
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #ffb400;
  margin-bottom: 8px;
}

.rating span {
  color: #999;
  margin-left: 4px;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price {
  font-weight: 700;
  font-size: 18px;
  color: #ef4444;
}

.original {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: line-through;
}

.promo {
  font-size: 12px;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 32px;
}

.pagination-btn,
.pagination-page {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.2s;
}

.pagination-btn:hover,
.pagination-page:hover {
  background-color: #f5f5f5;
  border-color: var(--secondary);
}

.pagination-page.active {
  background-color: #8b5a2b;
  color: #fff;
  border-color: #8b5a2b;
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #f8f8f8;
  border-color: #eee;
}

.empty-tip {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  font-size: 16px;
  color: #666;
}

/* 针对该组件中的 router-link 链接样式重置 */
/deep/ .router-link {
  color: inherit;
  text-decoration: none;
}

/deep/ .router-link:active,
/deep/ .router-link:focus {
  color: inherit;
  outline: none;
}
</style>